<template>
  <page-header-wrapper :title="false">
    <a-card
      title="个人信息"
      :loading="pageLoading"
    >
      <div slot="extra">
        <a-tag color="#2db7f5">
          入职时间：{{ infoForm.hiredate }}
        </a-tag>
      </div>
      <a-alert showIcon type="warning" style="margin-bottom: 20px;" message="认真填写,信息不真实或者不完整会导致审核不过"></a-alert>
      <a-form-model
        ref="infoForm"
        :rules="infoRules"
        :model="infoForm"
      >
        <a-row
          :gutter="48"
        >
          <a-col :span="24">
            <a-form-model-item prop="image">
              <a-upload
                name="file"
                list-type="picture-card"
                class="avatar-uploader"
                :show-upload-list="false"
                :action="upload"
                :headers="headers"
                @change="handleUpload"
              >
                <img v-if="infoForm.image" :src="infoForm.image" width="150" height="150" />
                <div v-else>
                  <a-icon :type="loading ? 'loading' : 'plus'" />
                  <div class="ant-upload-text">
                    上传证件照
                  </div>
                </div>
              </a-upload>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-row :gutter="48">
              <a-col :span="6">
                <a-form-model-item label="性别" prop="gender">
                  <a-radio-group v-model="infoForm.gender">
                    <a-radio :value="1">
                      男
                    </a-radio>
                    <a-radio :value="2">
                      女
                    </a-radio>
                  </a-radio-group>
                </a-form-model-item>
              </a-col>
              <!--              <a-col :span="6">-->
              <!--                <a-form-model-item label="登陆手机号" prop="login_phone">-->
              <!--                  <a-input type="text" v-model="infoForm.login_phone" placeholder="填写手机登陆所需的手机号码" />-->
              <!--                </a-form-model-item>-->
              <!--              </a-col>-->
            </a-row>
          </a-col>
          <a-col :span="6">
            <a-form-model-item label="姓名" prop="name">
              <a-input v-model="infoForm.name" placeholder="填写姓名" />
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item label="身份证号" prop="id_card">
              <a-input v-model="infoForm.id_card" placeholder="填写身份证" />
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item label="微信" prop="wx">
              <a-input placeholder="填写微信号" />
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item label="QQ" prop="qq">
              <a-input placeholder="填写QQ号" />
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item label="是否从事过知识产权行业" prop="engaged_kp">
              <a-radio-group v-model="infoForm.engaged_kp">
                <a-radio :value="0">
                  无
                </a-radio>
                <a-radio :value="1">
                  有
                </a-radio>
              </a-radio-group>
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item label="是否已婚" prop="married">
              <a-radio-group v-model="infoForm.married">
                <a-radio :value="0">
                  否
                </a-radio>
                <a-radio :value="1">
                  是
                </a-radio>
              </a-radio-group>
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item label="有无子女" prop="have_children">
              <a-radio-group v-model="infoForm.have_children">
                <a-radio :value="0">
                  有
                </a-radio>
                <a-radio :value="1">
                  无
                </a-radio>
              </a-radio-group>
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item label="子女性别" prop="child_gender">
              <a-radio-group v-model="infoForm.child_gender">
                <a-radio :value="0">
                  男
                </a-radio>
                <a-radio :value="1">
                  女
                </a-radio>
              </a-radio-group>
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item label="出生年月日" prop="birthday">
              <a-date-picker v-model="infoForm.birthday" placeholder="选择出生年月日" @change="onChange" />
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item label="父亲生日" prop="father_birthday">
              <a-date-picker placeholder="选择父亲生日" />
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item label="母亲生日" prop="mother_birthday">
              <a-date-picker placeholder="选择母亲生日" />
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item label="子女生日" prop="child_birthday">
              <a-date-picker placeholder="选择子女生日" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="家庭住址" prop="family_address">
              <a-input v-model="infoForm.family_address" placeholder="填写家庭住址" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="个人爱好" prop="personal_hobbies">
              <a-textarea :rows="5" v-model="infoForm.personal_hobbies" placeholder="填写个人爱好" allow-clear />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-form-model-item>
          <a-button type="primary" @click="submitInfo">
            提交
          </a-button>
          <a-button style="margin-left: 10px" @click="resetForm">
            重置
          </a-button>
        </a-form-model-item>
      </a-form-model>
    </a-card>
  </page-header-wrapper>
</template>

<script>
  import storage from 'store'
  import moment from 'moment'
  import apis from '@/api'
  import { ACCESS_TOKEN } from '@/store/mutation-types'
  import { getMyInfo, addMyInfo } from '@/api/mine'

  export default {
    name: 'PersonalInfo',
    data () {
      return {
        time: '~',
        infoForm: {},
        infoRules: {
          image: [
            { required: true, message: '上传头像', trigger: 'change' }
          ],
          gender: [
            { required: true, message: '选择性别', trigger: 'change' }
          ],
          // login_phone: [
          //   { required: true, message: '必须填写短信验证登陆所需的手机号码', trigger: 'blur' },
          //   { pattern: /^[1](([3][0-9])|([4][5-9])|([5][0-3,5-9])|([6][5,6])|([7][0-8])|([8][0-9])|([9][1,8,9]))[0-9]{8}$/, message: '请输入正确的手机号码', trigger: 'blur' }
          // ],
          name: [
            { required: true, message: '填写姓名', trigger: 'blur' }
          ],
          id_card: [
            { required: true, message: '填写身份证号', trigger: 'blur' },
            { len: 18, message: '身份证号必须是18位', trigger: 'blur' }
          ],
          birthday: [
            { required: true, message: '选择出生年月日', trigger: 'change' }
          ],
          family_address: [
            { required: true, message: '必须填写家庭地址', trigger: 'blur' }
          ]
        },
        uploadLoading: false,
        loading: false,
        pageLoading: true,
        upload: apis.Upload,
        headers: {
          'Access-Token': storage.get(ACCESS_TOKEN)
        }
      }
    },
    created () {
      this.getInfo()
    },
    methods: {
      moment,
      getInfo () {
        const app = this
        getMyInfo()
          .then(res => {
            app.infoForm = res.result.info
            app.pageLoading = false
          })
      },
      submitInfo () {
        const app = this
        const info = {}
        app.$refs.infoForm.validate(valid => {
          if (valid) {
            const result = app.infoForm
            for (const k in result) {
              info['info[' + k + ']'] = result[k]
            }
            addMyInfo(info)
              .then(res => {
                if (res.status === 0) {
                  app.$info({
                    title: '提交信息成功',
                    onOk: () => {
                      app.getInfo()
                    }
                  })
                } else {
                  app.$warning({
                    title: res.msg
                  })
                }
              })
          } else {
            return false
          }
        })
      },
      onChange (date, dateString) {
        this.infoForm['birthday'] = dateString
      },
      handleUpload (info) {
        if (info.file.status === 'uploading') {
          this.loading = true
          return
        }
        if (info.file.status === 'done') {
          this.infoForm.image = info.file.response.result.url
          this.loading = false
        }
      },
      getBirthdayFromIdCard (card) {
        const app = this
        if (card !== null && card !== '') {
          if (card.length === 15) {
            app.infoForm.birthday = card.substr(6, 6)
          } else if (card.length === 18) {
            app.infoForm.birthday = card.substr(6, 8)
          } else {
            app.$warning({
              title: '身份证号码错误'
            })
          }
        } else {
          app.$warning({
            title: '填写身份证号'
          })
        }
        // const birthday = ''
        // const { infoForm } = this
        // if (infoForm.birthday !== null && infoForm.birthday !== '') {
        //   if (infoForm.length === 15) {
        //     birthday = '19' + infoForm.id_card.substr(6, 6)
        //   } else if (infoForm.length === 18) {
        //     birthday = infoForm.id_card(6, 8)
        //   }
        // }
      },
      resetForm () {
        this.infoForm = {}
      }
    }
  }
</script>

<style scoped>

</style>
